<template>
    <div class="notify-message-box">
        <el-card>
            <div class="notify-header">
                <div class="notify-icon">
                    <el-icon>
                        <component :is="icon"/>
                    </el-icon>
                </div>
                <div class="notify-title">
                    {{ ctx.title }}
                </div>
                <div class="notify-close">
                    <el-button text @click="closeMessage">
                        <el-icon>
                            <Close/>
                        </el-icon>
                    </el-button>
                </div>
            </div>
            <div class="notify-body">
                {{ ctx.message }}
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import {type} from "../../model/type";
import {ref} from "vue";
import {Close} from "@element-plus/icons-vue";
import {useNotifyStore} from "../../store/notify";

const notify=useNotifyStore()
const icon = ref('')
const props = defineProps({
    ctx: type.NotifyMessage,
    index:Number
})
if (props.ctx?.type !== '') {
    switch (props.ctx?.type) {
        case 'success':
            icon.value = 'SuccessFilled'
            break
        case 'warning':
            icon.value = 'WarningFilled'
            break
        case 'error':
            icon.value = 'CircleCloseFilled'
            break
        case 'info':
            icon.value = 'InfoFilled'
            break
    }
}

function closeMessage() {
    notify.Close(props.index!)
}
</script>

<style scoped>
.notify-message-box {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.notify-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.notify-title{
    flex: 1;
    padding-left: 5px;
}
</style>